<template>
  <el-select-v2
    filterable
    placeholder="请选择"
    v-bind="$attrs"
    :options="list"
    clearable
  >
    <template #default="{ item }">
      <el-tooltip
        class="box-item"
        effect="dark"
        :content="item.label"
        placement="left"
      >
        <div style="height: 100%;overflow: hidden;">{{ item.label }}</div>
      </el-tooltip>
    </template>
  </el-select-v2>
</template>

<script lang="ts" setup name="supplierSelect">
import { readAllCustomer } from '/@/api/customer';
import { ref, onMounted } from 'vue';
import { padStart } from 'lodash';

const list = ref([]);

const fetchData = async () => {
  const { data } = await readAllCustomer();
  list.value = data.list.map((item: any) => ({
    label: `(${padStart(item.code, 4, '0')})${item.name}`,
    value: item.id
  }));
};

onMounted(() => {
  fetchData();
});
</script>
